<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索</title>
  <style>
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    #allmap {
      width: 100%;
      height: 70%;
      font-size: 30px;
    }

    /* 隐藏百度地图logo */
    .BMap_cpyCtrl {
      display: none;
    }

    /* 搜索结果 */
    #r-result {
      width: 100%;
    }

    .sousuo {
      width: 90%;
      margin: 10px auto;
      display: flex;
      justify-content: space-between;
    }
    #sousuo-tit {
      width: 70%;
      padding: 10px;
    }
    #sousuo-btn {
      width: 18%;
      height: 100%;
      padding: 8px 8px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <!-- 搜索框 -->
  <div class="sousuo">
    <input type="text" id="sousuo-tit" placeholder=" 目的地 / 酒店 / 景点 / 超市">
    <button id="sousuo-btn">搜索</button>
  </div>
  <div id="allmap"></div>

  <div id="r-result"></div>

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ilosSPV2jG13axlNnWWfV93IE9xG5c2L"></script>
  <script>
    // 定义变量用于接收索引参数传入
    var myKeys = null;

    // 获取搜索值
    var sousuo_btn = document.getElementById("sousuo-btn");
    var sousuo_tit = document.getElementById("sousuo-tit");
    sousuo_btn.addEventListener("click", function () {
      myKeys = sousuo_tit.value ? sousuo_tit.value : null;


      // 预设索引地址
      // myKeys = ["酒店", "超市"];
      // 关键字检索
      if (myKeys != null) {
        var local = new BMap.LocalSearch(map, {
          renderOptions: { map: map, panel: "r-result" },
          pageCapacity: 10
        });
        local.searchInBounds(myKeys, map.getBounds());
      }

    })




    // 初始化地图
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 15);
    // 开启鼠标滑轮缩放
    map.enableScrollWheelZoom(true);
    // 左侧控件 
    map.addControl(new BMap.NavigationControl());

    var geolocation = new BMap.Geolocation();
    // 开启SDK辅助定位
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        // 打印获取到的位置信息
        console.log(r.address.city);
        // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 30);


      }
      else {
        // alert('failed' + this.getStatus());
        alert("获取失败，请打开 ‘位置信息’ 后重试 ！");
      }
    });




  </script>

</body>

</html>